<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>实现拖拽</title>
	</head>

	<body>
		<style>
			#box {
				width: 200px;
				height: 200px;
				background: teal;
				position: fixed;
				top: 0;
				left: 0;
			}
		</style>
		<div id="box"></div>
		<script>
			window.onload = function () {
				// drag处于绝对定位状态
				let drag = document.getElementById('box');
				drag.onmousedown = function (e) {
					var e = e || window.event;
					// 鼠标与拖拽元素边界的距离 = 鼠标与可视区边界的距离 - 拖拽元素与边界的距离
					let diffX = e.clientX - drag.offsetLeft;
					let diffY = e.clientY - drag.offsetTop;
					drag.onmousemove = function (e) {
						// 拖拽元素移动的距离 = 鼠标与可视区边界的距离 - 鼠标与拖拽元素边界的距离
						let left = e.clientX - diffX;
						let top = e.clientY - diffY;
						// 避免拖拽出可视区
						if (left < 0) {
							left = 0;
						} else if (left > window.innerWidth - drag.offsetWidth) {
							left = window.innerWidth - drag.offsetWidth;
						}
						if (top < 0) {
							top = 0;
						} else if (top > window.innerHeight - drag.offsetHeight) {
							top = window.innerHeight - drag.offsetHeight;
						}
						drag.style.left = left + 'px';
						drag.style.top = top + 'px';
					};
					drag.onmouseup = function (e) {
						this.onmousemove = null;
						this.onmouseup = null;
					};
				};
			};
		</script>
	</body>
</html>
